<!-- 「分享得现金」页面 -->
<template>
  <div class="container">
    <uni-nav-bar class="nav-bar" title="分享得现金" statusBar="true" leftIcon="left" @clickLeft="back" :border="false"
      backgroundColor="#00000000"></uni-nav-bar>
    <!-- 分享提示 -->
    <div class="share-tip">
      <text class="share-tip-text">
        将我们的小程序分享出去，对方在平台上的消费您将获得
        <text class="emphasize">50%</text>
        佣金
      </text>
    </div>
    <!-- 可提现金额 -->
    <div class="cash">
      <text class="cash-text">可以提现金额（元）</text>
      <text class="cash-amount"><text class="symbol">¥</text>{{ userInfo.money_remain }}</text>
    </div>
    <!-- 「提现金额」卡片 -->
    <div class="withdraw-card">
      <div class="withdraw-card-head">
        <text class="head-left">提现金额</text>
        <text class="head-right" @click="navigateTo('bill')">明细</text>
      </div>
      <div class="withdraw-card-amount">
        <text class="amount-symbol">¥</text>
        <input class="amount-input" type="digit" placeholder="满1.00元可提现" v-model="takeMoney">
        <text class="amount-text" @click="takeOutHandler">立即提现</text>
      </div>
      <div class="hr"></div>
      <div class="withdraw-card-mine">
        <image class="avatar" :src="userInfo.avatar" mode="aspectFill"></image>
        <text class="nickname ellipsis">{{ userInfo.name }}</text>
        <text class="total-amount">累计收益：{{ userInfo.money_all }}元</text>
      </div>
    </div>
    <!-- 「我的邀请」卡片 -->
    <div class="invite-card">
      <text class="invite-card-head">我的邀请</text>
      <div class="invite-card-item left" @click="navigateTo('invited-vip-users')">
        <text class="invite-card-item-amount">{{ invitedVipUser.length || 0 }}</text>
        <text class="invite-card-item-text">VIP用户</text>
      </div>
      <div class="invite-card-item right" @click="navigateTo('invited-non-vip-users')">
        <text class="invite-card-item-amount">{{ invitedCommonUser.length || 0 }}</text>
        <text class="invite-card-item-text">非VIP用户</text>
      </div>
      <!-- 提示 -->
      <text class="invite-card-tip">通过您的分享进入我们平台且产生消费行为的，您将获得50%的佣金</text>
    </div>
    <!-- 「分享赚收益」按钮 -->
    <button class="share-button" open-type="share">
      <text class="share-button-text">分享赚收益</text>
    </button>
    <bindAlipay v-if="isShowBindDialog" @close="closeHandler"/>
  </div>
</template>

<script lang="ts" setup>
import { ref, computed, onMounted } from 'vue';
import { useUser } from '@/stores/user-store';
import { back, navigateTo } from '@/utils/navigate';
import { storeToRefs } from 'pinia';
import bindAlipay from '@/components/bind-Alipay.vue';
import { showToast } from '@/utils/tools';
import { takeOutByAlipay, invitePersonList } from "@/api/api-user";
import { onShareAppMessage } from '@dcloudio/uni-app'

const userStore = useUser()
const { userInfo, invitedVipUser, invitedCommonUser } = storeToRefs(userStore);
const { updateUserMoney, updateInvitedCommonUser, updateInvitedVipUser } = userStore;

onMounted(() => {
  getInvitePersonList();
})

// 是否显示绑定弹窗变量
const isShowBindDialog = ref(false);
// 是否绑定支付宝的变量
const isBindAlipay = computed(() => userInfo.value.zfb_account ? true : false)

/**
 * 点击立即提现，判断是否绑定支付宝，未绑定则文字提示还未绑定支付宝，并弹出绑定弹窗
 */
const takeMoney = ref('');
const takeOutHandler = async () => {
  if (!isBindAlipay.value) {
    showToast('当前账户还未绑定支付宝~')
    setTimeout(() => {
      isShowBindDialog.value = true;
    }, 1500);
    return;
  }
  // 判断提现金额是否合法
  if (!takeMoney.value) {
    showToast('请输入提现金额~');
    return;
  }
  if (Number(takeMoney.value) > Number(userInfo.value.money_remain)) {
    showToast('账户余额不足~');
    return;
  }
  // if (Number(takeMoney.value) < 1) {
  //   showToast('提现金额不能少于1元~');
  //   return;
  // }

  // 调用提现接口
  const res: any = await takeOutByAlipay(takeMoney.value);
  const target = res.data.data;
  if (target && String(target.result_code) === 'SUCCESS') {
    // 提示提现成功
    showToast('提现成功~')
    // 更新store中的账户余额
    updateUserMoney(takeMoney.value)
  } else {
    showToast('提现失败，请稍后重试');
    return;
  }
}

/**
 * 组件关闭时间的回调监听函数
 */
const closeHandler = () => {
  isShowBindDialog.value = false;
}

/**
 * 获取当前用户邀请的新用户数据
 */
const getInvitePersonList = async () => {
  const res: any = await invitePersonList();
  console.log('获取到的数据', res);
  const target = res.data.data;
  const { vipUserList, noVipUserList } = target;
  updateInvitedCommonUser(noVipUserList);
  updateInvitedVipUser(vipUserList);
}

/**
 * 分享逻辑
 */
onShareAppMessage(()=> {
  return {
    path: `pages/lines?invitorId=${userInfo.value.id}`,
    title: 'AI台词助手、婚礼问卷，您的主持好帮手，快来查看吧',
    imageUrl: 'https://ustatic.hudongmiao.com/%20miao/survey/questionaireShareImg.png'
  }
})

</script>

<style lang="scss" scoped>
.container {
  width: 100vw;
  min-height: 100vh;
  background: linear-gradient(141deg, #f2f8f3 0%, #f2f8f3 100%);

  display: grid;
  grid-template:
    'nav-bar' auto
    '.' 24px
    'share-tip' 12.3077vw
    '.' 39px
    'cash' 21.0256vw
    '.' 28px
    'withdraw-card' 44.1026vw
    '.' 10px
    'invite-card' 53.8462vw
    '.' 24px
    'share-button' 1fr;

  .nav-bar {
    grid-area: nav-bar;
  }


  // 分享提示
  .share-tip {
    grid-area: share-tip;

    width: 100vw;
    padding: 0 29px;

    .share-tip-text {
      font-size: 17px;
      color: #333333;

      .emphasize {
        color: #FE4758;
        text-decoration: none;
      }
    }
  }

  // 可提现金额
  .cash {
    grid-area: cash;

    padding: 0 15px;
    display: flex;
    flex-direction: column;

    .cash-text {
      color: #9fa3a0;
      font-size: 15px;
      letter-spacing: 2px;
    }

    .cash-amount {
      margin-top: 5px;
      font-size: 40px;
      color: #fe4758;
      font-weight: bold;

      .symbol {
        font-size: 24px;
      }
    }
  }

  // 「提现金额」卡片
  .withdraw-card {
    grid-area: withdraw-card;
    justify-self: center;

    width: 92.3077vw;
    height: auto;
    background: #ffffff;
    border-radius: 20px;

    padding: 38rpx 29rpx;
    box-sizing: border-box;
    display: grid;
    grid-template:
      'withdraw-card-head' 5.3846vw
      '.' 29rpx
      'withdraw-card-amount' 1fr
      '.' 29rpx
      'hr' 2rpx
      '.' 19rpx
      'withdraw-card-mine' 10.2564vw;

    .withdraw-card-head {
      grid-area: withdraw-card-head;
      display: flex;
      justify-content: space-between;
      align-items: center;

      .head-left {
        font-size: 15px;
        font-weight: bold;
        color: #333333;
        line-height: 21px;
      }

      .head-right {
        font-size: 11px;
        text-decoration: underline;
        color: #fe4758;
        line-height: 15px;
      }
    }

    // 提现金额
    .withdraw-card-amount {
      grid-area: withdraw-card-amount;
      display: grid;
      grid-template:
        'amount-symbol amount-input amount-text' 1fr
        / 5.1282vw 1fr 15.8974vw;
      grid-gap: 10px;
      align-items: center;

      .amount-symbol {
        grid-area: amount-symbol;
        align-self: center;
        font-weight: 500;
        font-size: 32px;
        font-weight: bold;
        color: #000000;
      }

      .amount-input {
        position: relative;
        grid-area: amount-input;
        font-size: 15px;
        line-height: 21px;
        z-index: 1;
      }

      .amount-text {
        grid-area: amount-text;

        font-size: 15px;
        line-height: 21px;
        font-size: 15px;
        color: #fe4758;
      }
    }

    // 分割线
    .hr {
      grid-area: hr;
      width: 82.0513vw;
      height: 1px;
      background: #e0e0e0;
      width: 100%;
    }

    // 我的信息
    .withdraw-card-mine {
      grid-area: withdraw-card-mine;
      display: grid;
      grid-template:
        'avatar nickname total-amount' 1fr
        / 10.2564vw 1fr auto;
      grid-gap: 10rpx;
      align-items: center;

      .avatar {
        grid-area: avatar;
        width: 10.2564vw;
        height: 10.2564vw;
        object-fit: cover;
        border-radius: 50%;
      }

      .nickname {
        grid-area: nickname;
        font-size: 15px;
        color: #333333;
        line-height: 21px;
      }

      .total-amount {
        grid-area: total-amount;
        font-size: 15px;
        color: #333333;
        line-height: 21px;
      }
    }
  }

  // 「我的邀请」卡片
  .invite-card {
    justify-self: center;
    grid-area: invite-card;

    width: 92.3077vw;
    background: #ffffff;
    border-radius: 20px;

    padding: 15px;
    display: grid;
    grid-template:
      'invite-card-head invite-card-head' 5.3846vw
      '. .' 15px
      'invite-card-item-left invite-card-item-right' 16.6667vw
      '. .' 15px
      'invite-card-tip invite-card-tip' 16.9231vw;

    .invite-card-head {
      grid-area: invite-card-head;
      display: flex;
      align-items: center;

      font-size: 15px;
      font-weight: bold;
      color: #333333;
    }

    .invite-card-item {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;

      &.left {
        grid-area: invite-card-item-left;

        position: relative;

        // 分隔线
        &::after {
          content: '';
          position: absolute;
          top: 50%;
          right: 0;
          transform: translateY(-50%);

          width: 1px;
          height: 32px;
          background: #e0e0e0;
        }
      }

      &.right {
        grid-area: invite-card-item-right;
      }

      .invite-card-item-amount {
        font-size: 32px;
        line-height: 45px;
      }

      .invite-card-item-text {
        font-size: 15px;
        line-height: 21px;
      }

      // 左边的「VIP用户」字样颜色不同
      &.left {
        .invite-card-item-text {
          color: #ffd452;
        }
      }
    }

    .invite-card-tip {
      grid-area: invite-card-tip;
      background: #f7f7f7;
      border-radius: 10px;

      padding: 15px;
      display: flex;
      justify-content: center;
      align-items: center;

      font-size: 3.3333vw;
      color: #fe4758;
    }
  }

  // 「分享赚收益」按钮
  .share-button {
    align-self: center;
    justify-self: center;
    grid-area: share-button;

    width: 89.7436vw;
    height: 13.8462vw;
    background: linear-gradient(270deg, #f2aa7b 0%, #f5c070);
    border-radius: 33px;

    display: flex;
    justify-content: center;
    align-items: center;

    .share-button-text {
      font-size: 16px;
      color: #FFFFFF;
    }
  }
}
</style>
